<template>
  <div>
    <div class="seatchContainer">
      名称 <input type="text" placeholder="请输入搜索内容" v-model="keyword" @input="searchBykeyword" :disabled="isEdit">
      <button class="editBtn" v-show="!isEdit" @click="openEdit">编辑</button>
      <button class="complateBtn" v-show="isEdit" @click="openEdit">完成编辑</button>
    </div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="checkAll"> 全选/全不选</th>
          <th style="text-align: center;" v-for="(title, tidx) in titles" :key="tidx">{{title}}</th>
          <th v-show="isEdit">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in info" :key="item.id" v-show="item.isShow">
          <td> <input type="checkbox" v-model="checkList[index]"></td>
          <td>{{item.id}}</td>
          <td>{{item.title}}</td>
          <td>
            <div class="price">{{item.price_info}}</div>
            <div class="num" v-show="isEdit">
                <button @click="add(index)">+</button>
                {{item.num}}
                <button @click="sub(index)">-</button></div>
            <div class="num" v-show="!isEdit">x{{item.num}}</div>
          </td>
          <td v-show="isEdit"><button @click="del(index)">删除</button></td>
        </tr>
        <tr>
          <td colspan="5" class="totolPrice" v-show="!isEdit">总价格为:￥{{totalPrice | keyTwo}} 元</td>
          <td colspan="5" class="totolPrice" v-show="isEdit"><button @click="delSelected">删除选中</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    components: {

    },
    data() {
      return {
        keyword: '',
        titles: ["ID", "主标题", "起步价格"],
        checkList: [],
        info: [{
            id: 287,
            title: "严选新式样板间",
            price_info: 29.9,
            isShow: true,
            num: 1,
          },
          {
            id: 286,
            title: "无“油”无虑的甜蜜酥脆",
            price_info: 45,
            isShow: true,
            num: 1,
          },
          {
            id: 283,
            title: "孩子成长中少不了的一双鞋",
            price_info: 78,
            isShow: true,
            num: 1,
          },
          {
            id: 282,
            title: "成就一室笋香1",
            price_info: 121,
            isShow: true,
            num: 1,
          },
          {
            id: 281,
            title: "条纹新风尚",
            price_info: 29,
            isShow: true,
            num: 1,
          },
          {
            id: 277,
            title: "治愈生活的满怀柔软",
            price_info: 66.78,
            isShow: true,
            num: 1,
          },
          {
            id: 274,
            title: "没有软木拖，怎么过夏天",
            price_info: 50.99,
            isShow: true,
            num: 1,
          },
          {
            id: 272,
            title: "料理也要精细简单",
            price_info: 69,
            isShow: true,
            num: 1,
          },
          {
            id: 271,
            title: "选式新懒人",
            price_info: 15.3,
            isShow: true,
            num: 1,
          },
          {
            id: 268,
            title: "米饭好吃的秘诀：会呼吸的锅",
            price_info: 20.1,
            isShow: true,
            num: 1,
          },
        ],
        isEdit: false
      }
    },
    created() {
      this.checkList = this.info.map(item => false) //创建数组
    },
    computed: {
      // 总价
      totalPrice() {
        return this.info.reduce((prev, current, index) => {
          // 必须是选中了而且是显示中的才能算入总价
          return prev + ((this.checkList[index] && this.info[index].isShow) ? current.price_info * current.num : 0)
        }, 0)
      },
      // 全选/全不选
      checkAll: {
        set(newVal) {
          if(this.keyword){  //搜索状态
            this.checkList = this.checkList.map((item,index) =>{
              if(this.info[index].isShow){
                  return newVal
              }else{
                return item
              }
            })
          }else{
            this.checkList = this.checkList.map(item => newVal)
          }
          
        },
        get() {
          if(this.keyword){  //搜索状态
            let temArr = []
            this.info.forEach((item,index)=>{
              if(item.isShow){
                temArr.push(this.checkList[index])
              }
            })
            
            if(temArr.length==0){  //如果选中又被删了
              return false
            }

            return !temArr.includes(false)

          }else{
            return !this.checkList.includes(false) //只要checkList没有false就是全选
          }
          
        }

      }
    },
    methods: {
      // 搜索功能
      searchBykeyword(e) {
        let value = e.target.value
        if (!value.trim()) {
          this.info.forEach(item => {
            item.isShow = true
          })
          return
        }
        this.info.forEach(item => {
          item.isShow = !(item.title.indexOf(value) == -1)
        })
      },
      // 打开/关闭 编辑
      openEdit() {
        this.isEdit = !this.isEdit
      },
      // 数量增加
      add(index) {
        this.info[index].num++
      },
      // 数量减少
      sub(index) {
        if (this.info[index].num <= 1) {
          return
        }
        this.info[index].num--
      },
      // 删除
      del(index) {
        this.info.splice(index, 1)
        this.checkList.splice(index, 1)
      },
      // 删除选中
      delSelected(){
        let delIndexArr = []
        this.checkList.forEach((item,index)=>{
          if(item && this.info[index].isShow){
            delIndexArr.push(index) 
          }
        })

        // 直接删有问题  只能过滤掉要删除的..
        this.info = this.info.filter((item,index)=>{
           return !delIndexArr.includes(index)
        })

        this.checkList = this.checkList.filter((item,index)=>{
           return !delIndexArr.includes(index)
        })
      }
    },
    filters: {
      // 保留两位小数
      keyTwo(val) {
        return val.toFixed(2)
      }
    }
  }
</script>

<style lang="less">
  table {
    width: 800px;
    margin: 10px auto;
    border: 1px solid #ddd;
    border-collapse: collapse;
    color: #666;
    font-size: 14px;
  }

  table th {
    width: 100px;
    border: 1px solid #ddd;
  }

  table tr {
    height: 70px;
  }

  table td {
    padding-left: 10px;
    border: 1px solid #ddd;
  }

  button {
    height: 30px;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    border: none;
    background-color: #87CEEB;
  }

  .price {
    margin-left: 20px;
    float: left;
  }

  .num {
    float: right;
    margin-right: 20px;
    margin: 0 10px;
  }

  .num button {
    margin: 0 5px;
    padding: 0;
    height: 20px;
    width: 20px;
  }

  .seatchContainer {
    color: #666;
    font-size: 14px;
    text-align: center;
  }

  .seatchContainer input {
    margin: 0 30px;
    height: 30px;
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
  }

  .editBtn {
    background-color: green;
  }

  .complateBtn {
    background-color: red;
  }

  .totolPrice {
    text-align: right;
    padding-right: 50px;
  }
</style>